<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>${title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <link rel="stylesheet" href="../res/static/css/mian.css">
    <link rel="stylesheet" href="../res/static/lib/wangEditor/plus/wangEditor-fullscreen-plugin.css">
    <style>
        .lay-blog ul.pop-nav {
            z-index: 2000;
        }

        .container {
            margin: 0 auto !important;
        }

        .w-e-toolbar {
            flex-wrap: wrap;
            font-size: 14px;
        }
    </style>
</head>
<body class="lay-blog">
<#include "../common/header.ftl">
<div class="container-wrap">
    <div class="container">
        <div class="contar-wrap">
            <div class="container-panel">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">新增文章</li>
                        <li>管理文章</li>
                        <li>管理分类</li>
                        <li>管理用户</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <form class="layui-form layui-form-pane" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">标题</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="articleName" required=""
                                               lay-verify="required" placeholder="请输入标题"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>


                                <div class="layui-form-item layui-form-text">
                                    <div class="layui-input-block">
                                        <div id="edit"
                                             style="background: #fff;"></div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">分类</label>
                                    <div class="layui-input-inline">
                                        <select name="categoryId" lay-verify="required" lay-search="">
                                            <option value="">直接选择或搜索选择</option>

                                        </select>
                                    </div>
                                    <button class="layui-btn" id="add">添加分类</button>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn"
                                            lay-submit=""
                                            lay-filter="save">保存
                                    </button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-tab-item">
                            <table class="layui-hide" id="articleListInit" lay-filter="articleListInit"></table>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-btn-group demoTable">
                                <button class="layui-btn" id="addCaregory">添加分类</button>
                            </div>
                            <table class="layui-hide" id="categoryListInit" lay-filter="categoryListInit"></table>
                        </div>
                        <div class="layui-tab-item">
                            <table class="layui-hide" id="userListInit" lay-filter="userListInit"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<#include "../common/footer.ftl">
<script src="../res/layui-v2.4.3/layui/layui.js"></script>
<script type="text/javascript" src="../res/static/lib/wangEditor/wangEditor.min.js"></script>
<script type="text/javascript" src="../res/static/lib/wangEditor/plus/wangEditor-fullscreen-plugin.js"></script>
<script src="../res/static/js/basePath.js"></script>
<script type="text/javascript">
    //富文本编辑器初始化
    var E = window.wangEditor;
    var editor = new E('#edit');
    editor.create()
</script>
<script>
    layui.use(['element', 'form', 'jquery', 'layer', 'table'], function () {
        var form = layui.form
                , layer = layui.layer
                , table = layui.table
                , element = layui.element
                , $ = layui.jquery;

        //一些事件监听
        element.on('tab(docDemoTabBrief)', function (data) {
            switch (data.index) {
                case 0:
                    ajaxMeth.init();
                    break;
                case 1:
                    ajaxMeth.articleListInit();
                    break;
                case 2:
                    ajaxMeth.categoryListInit();
                    break;
                case 3:
                    layer.msg("实现中");
                    break;
                case 4:
                    layer.msg(data.index);
                    break;
            }
        });
        //监听文章工具条
        table.on('tool(articleListInit)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                //layer.msg('ID：' + data.id + ' 的查看操作');
                domMeth.detail(data.id);
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                    ajaxMeth.delArticle(data.id);
                    ajaxMeth.categoryListInit();
                });
            } else if (obj.event === 'edit') {
                layer.alert('编辑行：<br>' + JSON.stringify(data))
            }
        });
        //监听文章分类工具条
        table.on('tool(categoryListInit)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                //layer.msg('ID：' + data.id + ' 的查看操作');
                domMeth.detail(data.id);
            } else if (obj.event === 'del') {
                layer.confirm('真的删除此分类么', function (index) {
                    obj.del();
                    layer.close(index);
                    ajaxMeth.delCategory(data.id);
                    ajaxMeth.categoryListReload();
                });
            } else if (obj.event === 'edit') {
                layer.prompt({value: data.name},function (val, index) {
                    ajaxMeth.saveCategory({'categoryName': val,'categoryId':data.id});
                    layer.close(index);
                    ajaxMeth.categoryListReload();
                });
            }
        });


        $('#addCaregory').click(function () {
            layer.prompt(function (val, index) {
                ajaxMeth.saveCategory({'categoryName': val });
                layer.close(index);
                ajaxMeth.categoryListReload();
            });
        });
        //监听提交
        form.on('submit(save)', function (data) {
            var data = data.field;
            data.articleHtml = editor.txt.html();
            data.articleContent = editor.txt.text();
            ajaxMeth.saveArticle(data);
            return false;
        });

        //添加分类
        $("#add").click(function () {
            //prompt层
            layer.prompt(function (val, index) {
                ajaxMeth.saveCategory({'categoryName': val});
                ajaxMeth.init();
                layer.msg(val + '保存成功');
                layer.close(index);
            });
        });


        var ajaxMeth = (function () {
            var tabcategory = null;
            function categoryListReload(){
                tabcategory.reload({ });
            }

            function categoryListInit() {
                tabcategory = table.render({
                    elem: '#categoryListInit'
                    , url: webPath + '/api/category/list'
                    //,url:webPath+'/res/json/demo3.json'
                    , toolbar: true
                    , limit:50
                    , method: 'post'
                    , title: '分类数据表'
                    , totalRow: false
                    , loading:true
                    , cols: [[
                        {field: 'name', title: '标题'}
                        , {fixed: 'right', width: 178, align: 'center', toolbar: '#barDemoCategory'}
                    ]]
                    , page: false
                    , response: {
                        statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                    }
                    , request: {
                        pageName: 'page' //页码的参数名称，默认：page
                        , limitName: 'size' //每页数据量的参数名，默认：limit
                    }
                    , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.message, //解析提示文本
                            "count": res.data.count, //解析数据长度
                            "data": res.data.list //解析数据列表
                        };
                    }
                });
            }

            function saveArticle(data) {
                var parameter = {
                    type: "post",
                    url: webPath + "/api/article/saveOrUpdate",
                    data: data,
                    success: function (res) {
                        if (res.code == 200 && res.message == "OK") {
                            layer.msg('保存成功');
                        } else {
                            layer.msg(res.message)
                        }
                    }
                };
                $.ajax(parameter);
            }

            function init() {
                var parameter = {
                    type: "post",
                    url: webPath + "/api/category/list",
                    data: {},
                    success: function (res) {
                        if (res.code == 200 && res.message == "OK") {
                            var html = '';
                            for (var i in res.data.list) {
                                var item = res.data.list[i];
                                html += '<option value="' + item.id + '">' + item.name + '</option>';
                            }
                            $('select[name="categoryId"] option').remove();
                            $('select[name="categoryId"]').append(html);
                            form.render();
                        } else {
                            layer.msg(res.message)
                        }
                    }
                };
                $.ajax(parameter);
            }

            function saveCategory(data) {
                var parameter = {
                    type: "post",
                    url: webPath + "/api/category/saveOrUpdate",
                    async: false,
                    data: data,
                    success: function (res) {
                        if (res.code == 200 && res.message == "OK") {
                        } else {
                            layer.msg(res.message)
                        }
                    }
                };
                $.ajax(parameter);
            }

            //文章管理
            function articleListInit() {
                table.render({
                    elem: '#articleListInit'
                    , url: webPath + '/api/article/list'
                    //,url:webPath+'/res/json/demo3.json'
                    , toolbar: true
                    , method: 'post'
                    , title: '文章数据表'
                    , totalRow: false
                    , loading:true
                    , cols: [[
                        {field: 'name', title: '标题'}
                        , {field: 'anthor', width: 80, title: '作者'}
                        , {field: 'categoryName', width: 80, title: '分类'}
                        , {field: 'updateDate', title: '更新时间'}
                        , {fixed: 'right', width: 178, align: 'center', toolbar: '#barDemo'}
                    ]]
                    , page: true
                    , response: {
                        statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                    }
                    , request: {
                        pageName: 'page' //页码的参数名称，默认：page
                        , limitName: 'size' //每页数据量的参数名，默认：limit
                    }
                    , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.message, //解析提示文本
                            "count": res.data.count, //解析数据长度
                            "data": res.data.list //解析数据列表
                        };
                    }
                });
            }

            function delArticle(id) {
                var parameter = {
                    type: "get",
                    url: webPath + "/api/article/delete",
                    async: false,
                    data: {"id": id},
                    success: function (res) {
                        if (res.code == 200 && res.message == "OK") {
                            layer.msg('删除成功');
                        } else {
                            layer.msg(res.message)
                        }
                    }
                };
                $.ajax(parameter);
            }

            function delCategory(id) {
                var parameter = {
                    type: "get",
                    url: webPath + "/api/category/delete",
                    async: false,
                    data: {"id": id},
                    success: function (res) {
                        if (res.code == 200 && res.message == "OK") {
                            layer.msg('删除成功');
                        } else {
                            layer.msg(res.message)
                        }
                    }
                };
                $.ajax(parameter);
            }

            return {
                saveArticle: saveArticle //保存文章
                , init: init//文章分类初始化
                , saveCategory: saveCategory//保存分类
                , articleListInit: articleListInit
                , delArticle: delArticle
                , delCategory: delCategory
                , categoryListInit: categoryListInit
                , categoryListReload: categoryListReload
            }
        })();

        var domMeth = (function () {
            function init() {

            }

            function detail(id) {
                location.href = webPath + '/page/details?id=' + id;
            }

            return {
                init: init
                , detail: detail
            }
        })();

        //初始化文章分类
        ajaxMeth.init();

    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <#--<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="barDemoCategory">
    <#--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>